<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <%@ include file="/common/dxp/include/common-base.jsp"%>
  <title>解析数据查询</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

  <!-- Part 一、 以下是body主体内容的模块区域 -->
  <body class="hold-transition ${sysColor} sidebar-mini">
  <div class="wrapper">

	  <!-- top start -->
	  <%@include file="/common/dxp/top.jsp" %>
	  <!-- top end -->
	  <!-- left start -->
	  <%@include file="/common/dxp/left.jsp" %>
	  <!-- left end-->

	  <div class="content-wrapper">
		  <!-- Main start -->
		  <section class="content">
			  <div id="div_hidden_content" class="hidden" style="display:none;">
				  <input name="templateType" type="hidden" value="all"/>
				  <div id="hidden_common_final">
					  <!-- temp="hidden_common_final" start -->
					  <!-- temp="hidden_common_final" end -->
				  </div>
				  <!-- temp="delForm_hidden" start -->
				  <div id="delForm_hidden">
				  </div>
				  <!-- temp="delForm_hidden" end -->
				  <select
						  data-live-search='true'
						  id="initForm1_dxGwRuleSite_interfaceCode"
						  class="form-control  clean"
						  data-temp-obj="dxGwRuleSite.interfaceCode"
						  data-dict-code="dymicSql" data-dict-cate=""
						  data-colmun="{value:'interfaceCode',text:'interfaceName'}"
						  data-obj-name="dxInterfaceReg"
						  data-page-name="dx-interface-reg"
						  data-form-name="searchForm" data-condition=""
						  data-type-tag="select" >
					  <option value="">--请选择--</option>
				  </select>
			  </div>
			  <div class="row">
				  <div class="col-xs-12">

					  <!------搜索  start ------->
					  <div class="box box-info">
						  <!--搜索title  start -->
						  <div class="box-header with-border">
							  <h3 class="box-title"><i class="fa fa-search"></i> 解析数据查询搜索</h3>
							  <div class="box-tools pull-right">
								  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
										  class="fa fa-minus"></i></button>
							  </div>
						  </div>
						  <!--搜索title  end -->
						  <div class="box-body">
							  <form id="searchForm" action="javascript:void(0);">
								  <!-- temp="searchForm_hidden" start -->
								  <div id="searchForm_hidden">
									  <input  type="hidden" name="indexName" value="dataanalyze">
									  <input  type="hidden" name="indexType" value="doc">
									  <input  type="hidden" name="orderCloumn" value="createdTime">
									  <input  type="hidden" name="orderSort" value="desc">
									  <input  type="hidden" name="fileList" class="clean">
								  </div>
								  <!-- temp="searchForm_hidden" end -->

								  <!-- temp="searchForm_content" start -->
								  <div id="searchForm_content" class="form-group" data-temp-code="true"
									   data-temp-type="searchForm" data-temp-form-id="searchForm">
									  <table class="table table-bordered bordercolor">
										  <tbody>
										  <tr>
											  <td class="active" align="right"><label
													  class="form-control-static">服务/接口编号：</label></td>
											  <td>
												  <div class="form-group">
													  <input id="searchForm_input_interfaceCode" name="interfaceCode" class="form-control clean" maxlength="30">
												  </div>
											  </td>
											  <td class="active" align="right"><label
													  class="form-control-static">存储时间：</label></td>
											  <td>
                                                  <div class="form-group">
                                                      <div class="input-group ">
                                                          <input id="searchForm_input_startDate"  name="input_startDate" maxlength="30" class="form-control clean form_datetime" readonly="readonly" type="text">
                                                          <span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
                                                          <span class="input-group-addon"> 至 </span>
                                                          <input id="searchForm_input_endDate"  name="input_endDate" maxlength="30" class="form-control clean form_datetime" readonly="readonly" type="text">
                                                          <span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
                                                      </div>
                                                  </div>
											  </td>
										  </tr>
										  </tbody>
									  </table>
								  </div>
								  <!-- temp="searchForm_content" end -->
							  </form>
							  <div class="box-footer text-center">
								  <button type="button" class="btn btn-success" onclick="getTableData();"
										  data-temp-event="searchForm_hidden"><i class="fa fa-search"></i> 查询
								  </button>
								   
								  <button type="button" class="btn btn-warning"
										  onclick="mytools.cleanData('#searchForm');">重置
								  </button>
							  </div>
						  </div>
					  </div>
					  <!------- 搜索 end -------->

					  <!------- 列表 start -------->
					  <div class="box box-success">
						  <!--列表title  start -->
						  <div class="box-header with-border">
							  <h3 class="box-title"><i class="fa fa-table"></i> 查询结果 [共计<span id="dataListTotalCount">0</span>条数据]
							  </h3>
							  <div class="box-tools pull-right">
								  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
										  class="fa fa-minus"></i></button>
							  </div>
						  </div>
						  <div class="box-body">
							  <table id="dataList" class="table table-bordered table-hover">
								  <thead>
								  <tr id="dataList_thead_content" data-temp-code="true" data-temp-type="table"
									  data-temp-show="dataList_template_content">
									  <th>序号</th>
									  <!-- temp="dataList_thead_content" start -->
									  <%--                                    <th>系统编号</th>--%>
									  <th>请求唯一ID</th>
									  <th>服务/接口编号及名称</th>
									  <th>服务/接口地址</th>
									  <th>存储时间</th>
									  <th>操作</th>
									  <!-- temp="dataList_thead_content" end -->
								  </tr>
								  </thead>
								  <tbody id="dataList-body">

								  </tbody>
							  </table>
						  </div>

						  <div class="box-footer text-center">
							  <ul id="dataList-page" class="pagination">
							  </ul>
						  </div>
					  </div>
					  <!------- 列表 end -------->
				  </div>
			  </div>

			  <div win-title="查看窗口" class="modal fade" id="my_modal_view" tabindex="-2" role="dialog"
				   aria-labelledby="myModalLabel" aria-hidden="true">
				  <div class="modal-dialog" style="width:80%;">
					  <div class="modal-content">
						  <div class="modal-header">
							  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								  ×
							  </button>
							  <h4 class="modal-title">
								  <font color="red">解析数据</font> 
							  </h4>
							  <form id="viewForm" action="javascript:void(0)">
								  <!-- temp="viewForm_hidden" start -->
								  <div id="viewForm_hidden" style="display:none;"></div>
								  <!-- temp="viewForm_hidden" end -->
							  </form>
						  </div>
						  <div class="modal-body viewForm">

							  <div class="nav-tabs-custom">
								  <ul class="nav nav-tabs" id="myTab-view">
								  </ul>

								  <!-- tab content start -->
								  <div class="tab-content">

									  <div class="tab-pane active" id="tabView_1">
										  <form class="form-horizontal" role="form" id="viewForm1"
												action="javascript:void(0)">

											  <!-- temp="viewForm1_content" start -->
											  <div id="viewForm1_content">
												  <%--<table class="table table-bordered bordercolor">
													  <tbody>
													  <tr>
														  <td>
															  &lt;%&ndash;                                                            <label class="form-control-static">存证数据：</label>&ndash;%&gt;
															  <div class="form-control-static">
																  <pre style="height: 460px; overflow-y: scroll;"><code id="viewForm1_analytical_data"></code></pre>
															  </div>
														  </td>
													  </tr>

													  </tbody>
												  </table>--%>
													  <table id="viewForm1_table" class="table bordercolor table-bordered">
														  <thead> </thead>
														  <tbody> </tbody>
													  </table>
											  </div>

											  <!-- temp="viewForm1_content" end -->

										  </form>
										  <div class="form-group">
										  </div>
									  </div>


								  </div>
								  <!-- tab content e -->
							  </div>
						  </div>
					  </div>
					  <!-- /.modal-content -->
				  </div>
			  </div>

			  <!-- Part 二、以下是template模板定义的模块区域 -->
			  <script type="text/template" id="dataList-template">
				  <? for ( var i = 0; i < rows.length; i++) {?>
				  <tr>
					  <td><?=(pageObj.currentPage-1)*10+(i+1)?></td>
					  <!-- temp="dataList_template_content" start -->
					  <td style='display:none;'>
						  <input type="hidden" name="infoId" primary="infoId"  value="<?=strUtil.doNull(rows[i].infoId,'')?>"/>
					  </td>
					  <td title="<?=rows[i].traceId?>"><?=strUtil.subStr(rows[i].traceId,10)?></td>
					  <td><?=strUtil.doNull(rows[i].interfaceCode,'')?></br><?=dictListMap['dx-interface-reg-searchForm'][strUtil.doNull(rows[i].interfaceCode,'')]?></td>
					  <td>/data/<?=strUtil.doNull(rows[i].sourceCode,'')?></td>
					  <td><?=getFormatDateByLong(rows[i].createdTime,"yyyy-MM-dd hh:mm:ss")?></td>
					  <!-- temp="dataList_template_content" end -->
					  <td>
						  <button type="button" class="btn btn-success btn-xs" onclick="toLoad('<?=rows[i].rowkey?>','<?=rows[i].tableName?>','<?=rows[i].interfaceCode?>')"><i
								  class="fa fa-search-plus"></i> 查看
						  </button>
						  <button type="button" class="btn btn-primary btn-xs hidden" onclick="toResynchronizeData('<?=rows[i].es_metadata_id?>')"><i
								  class="fa fa-exchange"></i> 重新同步数据
						  </button>
					  </td>
				  </tr>
				  <?}?>
			  </script>

			  <!-- Part 三、 以下是js模块区域 -->
			  <script>
				  var clickMenu = "analytical-data-list";
				  var myPage, dataListId, searchFormId;
				  myPage = 10;//定义列表数据
				  dataListId = "dataList";//显示列表数据div的id
				  searchFormId = "searchForm";//搜索表单Id
				  /**
				   * 初始化数据字典，id传入#id 返回值Map用法：dictListMap["userType"][rows[i].userType]
				   */
				  var dictListMap = DictUtil.initDictAndDymic();
				  var tableListMap= {};
				  var timeStamp;
				  $(function () {

					  //初始化当天零时时间
					  timeStamp = new Date(new Date().setHours(0, 0, 0, 0));
					  $("#searchForm_input_startDate").val(timeStamp.format("yyyy-MM-dd hh:mm:ss"));
					  //1、加载分页列表数据
					  getTableData();

					  //2、控制是否启用token
					  //setToken();

				  });

				  $(function () {
					  //设置数据行选中效果
					  $('#' + dataListId + ' tbody').on('click', 'tr', function (e) {
						  if ($(this).hasClass('selected')) {
						  } else {
							  $('tr.selected').removeClass('selected');
							  $(this).addClass('selected');
						  }
						  //var id = $('tr.selected th').eq(0).html();
					  });
				  });
				  //注入日历框样式
				 /* var dateObject = $('.datepicker').datepicker({
					  language: 'zh-CN',
					  inline: true,
					  todayBtn: "linked",
					  format: "yyyy-mm-dd",
					  minuteStep:1,
					  autoclose: true
				  }).on('hide', function (e) {
					  //bootstrap datepicker与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决方法
					  //当日期选择框关闭时，执行刷新校验。
					  var fieldName = $(this).attr("name");//获取当前元素name
					  var formId = $(this).parents("form").eq(0).attr("id");//获取当前元素所在父层级中的就近的formId
					  // $("#" + formId).data('bootstrapValidator').updateStatus(fieldName, 'NOT_VALIDATED', null).validateField(fieldName);
				  });
*/
                  $('.form_datetime').datetimepicker({
                      // container: ".modal-content",
                      format: 'yyyy-mm-dd hh:ii:ss',
                      /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
                      language: 'zh-CN',
                      dateFormat: 'yyyy-mm-dd',//日期显示格式
                      timeFormat: 'HH:mm:ss',//时间显示格式
                      todayBtn: 1,
                      autoclose: 1,
                      minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
                      minuteStep: 5,//分钟间隔1分钟
                      endDate: new Date()
                  });
				  //给模态窗口内form表单内的所有支持必填项的元素注入校验
				  $(".modal").on('shown.bs.modal', function () {
					  $(this).find("form").each(function () {
						  var formId = $(this).attr("id");
						  if (!strUtil.isNull(formId)) {
							  formId = "#" + formId;
							  setValidate(formId);//定义add表单验证属性
							  mytools.cleanValidate(formId);//清空上次校验规则提示
						  }
					  });
				  });

				  //打开添加modal
				  function toAdd() {
					  mytools.cleanData(".addFormBody");//清空表单元素上次填写的内容；
					  $(".datepicker").val("");
					  $("#my_modal_add").modal("show");
				  }

				  //数据toLoad读取（查看、编辑）数据
				  function toLoad(rowKey,tableName,interfaceCode) {
					  $("#my_modal_view").modal("show");
					  //获取列头
					  $.get(common_list_url, {"pageName":"dx-msg-format-set","formName":"searchForm","dxMsgFormatSet.w_interfaceCode":interfaceCode,"dxMsgFormatSet.w_ifUse":"1","result_column":"dxMsgFormatSet.cloumEname,dxMsgFormatSet.paramCname"}, function (myData2) {
						  console.log(myData2,"myData2");
						  var headArray=myData2.rows;

						  if('1'==common_sys_version_mode){
							  //简版不走hbase
							  var data = tableListMap[rowKey].message;
							  // console.log(data,"data--fpc");
							  //反显加载数据
							  if (data) {
								  var tableOptions = {
									  tableObj:$("#viewForm1_table"),
									  bodyData:data,
									  titleConf:headArray,
									  titleConfKey:'cloumEname',
									  titleConfText:'paramCname',
									  titleClass:'active w150'
								  };
								  console.log(tableOptions,"fpc-table");
								  mytools.loadTableDynamicByInfo(tableOptions);
							  }
						  }else{
							  //反显加载数据
							  $.get(ctx+"/api/esSearchHbaseByRowKey", {"rowKey":rowKey,"tableType":"dataanalyze","tableName":tableName}, function (myData) {
								  console.log(myData,"myData");
								  //反显加载数据
								  /*if ("T"==myData.flag&&myData.data) {
                                      mytools.showJsonViewer(myData.data,"viewForm1_analytical_data");
                                      // $("#viewForm1_analytical_data").text(JSON.stringify(myData.data));
                                  }else{
                                      $("#viewForm1_analytical_data").text("暂未查到数据");
                                  }*/
								  // var tableOptions = {
								  //   tableObj:$("#viewForm1_table"),
								  //   headArray:headArray,
								  //   bodyData:{rows:[myData.data]},
								  //   templateHead:'',
								  //   headKeyAttr:'cloumEname'
								  // };
								  var tableOptions = {
									  tableObj:$("#viewForm1_table"),
									  bodyData:myData.data,
									  titleConf:headArray,
									  titleConfKey:'cloumEname',
									  titleConfText:'paramCname',
									  titleClass:'active w150'
								  };
								  console.log(tableOptions,"fpc-table");
								  mytools.loadTableDynamicByInfo(tableOptions);
							  }, "json");
						  }
					  }, "json");


				  }

				  //删除调用
				  function toDele(obj) {
					  if (!$("#delForm_hidden").find("input[name='formName']").val()) {
						  layer.alert("缺失删除参数！");
						  return;
					  }
					  var index_submit = layer.confirm("您确定要删除信息吗？", {btn: ["Yes", "No"], closeBtn: 0, offset: "220px"}
							  , function () {
								  layer.close(index_submit);
								  var paramData = {};
								  var inputPrimaryObj = $(obj).parent().parent().find("input[name='input_primaryKey']");
								  paramData["pageName"] = $("#delForm_hidden").find("input[name='pageName']").val();
								  paramData["formName"] = $("#delForm_hidden").find("input[name='formName']").val();
								  if (inputPrimaryObj.length > 0) {
									  for (var k = 0; k < inputPrimaryObj.length; k++) {
										  var pkobj = $(inputPrimaryObj[k]);
										  paramData[pkobj.attr("obj-name") + ".w_" + pkobj.attr("primary")] = pkobj.val();
									  }
									  $.ajax({
										  type: "post",
										  url: common_submit_url,
										  data: paramData, dataType: "json",
										  success: function (myData) {
											  var result = myData.flag;
											  if (result == "T") {
												  refresh();
											  } else {
												  layer.alert("删除失败！");
											  }
										  }
									  });
								  }
							  });
				  }

				  //加载列表数据
				  function getTableData() {

                      var flag=false;
                      var fileList =[];
					  var file={};
					  //小于等于
					  var lte = $("#searchForm_input_endDate").val();
					  //大于等于
					  var gte=$("#searchForm_input_startDate").val();
					  if(strUtil.isNull(gte) && strUtil.isNull(lte)){
						  $("#searchForm_input_startDate").val(timeStamp.format("yyyy-MM-dd hh:mm:ss"));
						  gte=$("#searchForm_input_startDate").val();
					  }
					  if(lte||gte){
						  file["fileName"]="createdTime";
						  if(lte){
							  var lteLong = new Date((lte).replace(new RegExp("-","gm"),"/")).getTime();
							  file["lte"]=lteLong;
						  }
						  if(gte){
							  var gteLong = new Date((gte).replace(new RegExp("-","gm"),"/")).getTime();
							  file["gte"]=gteLong;
						  }
						  flag=true;
                          fileList.push(file);
                      }
                      var interfaceCode =$("#searchForm_input_interfaceCode").val();
                      if(interfaceCode){
                          file={};
                          file["fileName"]="interfaceCode";
                          file["fileValue"]="*"+interfaceCode+"*";
                          file["searchType"]="wildcard";
                          flag=true;
                          fileList.push(file);
                      }

                      if(flag){
						  $("#" + searchFormId).find("input[name='fileList']").val(JSON.stringify(fileList))
					  }else {
                      	layer.alert("请输入查询条件");
						 return;
					  }
                      var index_load = layer.load(1, {shade: false});
					  $.ajax({
						  type: 'get',
						  url: ctx+"/api/esSearchPageList",
						  data: $("#" + searchFormId).serialize() + getCurrentPage(ctx+"/api/esSearchPageList?" + $("#" + searchFormId).serialize(), myPage),
						  // contentType:'application/json',
						  dataType: 'json',
						  success: function (myData) {
							  console.log(myData);
							  $("#dataListTotalCount").text(myData.total);
							  if ("T" == myData.flag) {
								  var data = baidu.template(dataListId + "-template", eval(myData));
								  $("#" + dataListId + "-body").html(data);
								  var option = {
									  ele: $("#" + dataListId + "-page")[0],
									  total: myData.total,
									  fn: getTableData,
									  url: ctx+"/api/esSearchPageList?" + $("#" + searchFormId).serialize()
								  }
								  generatePages(option);
								  if(myData.total>0){
									  saveTableListMapData(myData.rows);
								  }
							  }

						  }
					  });
                      layer.close(index_load);
				  }

				  function saveTableListMapData(data){
					  // console.log(data,"fpc001");
					  for (var i=0;i<data.length;i++){
						  var key = data[i].es_metadata_id;
						  // console.log(key,"key");
						  tableListMap[key]=data[i];
					  }
				  }
				  function toResynchronizeData(key) {
				  	var data = tableListMap[key];
				  	console.log(data,"toResynchronizeData");
					  var index_load = layer.load(1, {shade: false});
					  $.ajax({
						  type: 'post',
						  url: ctx+"/api/manualReceiveKafkaMsg",
						  data: JSON.stringify(data),
						  contentType:'application/json',
						  dataType: 'json',
						  success: function (myData) {
							  console.log(myData);
							  if(myData.msg){
								  layer.alert(myData.msg);
							  }
							  layer.close(index_load);

						  }
					  });
				  }


				  //提交tab1表单数据
				  function submitForm1(formId, tabId) {
					  //校验规则-表单提交时触发
					  var validate = $('#' + formId).data('bootstrapValidator').validate();
					  if (!validate.isValid()) { //如果校验不通过就返回
						  return;
					  }

					  var index_submit = layer.confirm('您确定要保存信息吗？', {btn: ['Yes', 'No'], closeBtn: 0, offset: '220px'}
							  , function () {
								  var result = submitForm(formId, tabId);
								  if (result) {
									  layer.alert("提交成功！", {closeBtn: 0});
									  mytools.closeModal("my_modal_add");
									  mytools.closeModal("my_modal_edit");
									  refresh();


									  setToken();
									  if (!strUtil.isNull(tabId)) {
										  $('.nav-tabs a[href=\"#' + tabId + '\"]').tab('show'); // Select tab by name
									  }
								  }
							  });

				  }

				  //提交表单数据
				  function submitForm(formId, tabId) {
					  var result;
					  var index_load = layer.load(1, {shade: false});
					  $.ajax({
						  type: 'post',
						  url: common_submit_url,
						  data: $("#" + formId).serialize(),
						  async: false,
						  dataType: 'json',
						  success: function (myData) {
							  console.log(myData);
							  if (myData.flag == "T") {
								  result = myData;
							  } else {
								  setToken();
								  layer.alert(myData.msg);
							  }
							  layer.close(index_load);
						  },
						  error: function (e) {
							  layer.close(index_load);
						  }
					  });
					  return result;
				  }

				  //刷新
				  function refresh() {
					  getTableData();
				  }

				  //设置token
				  function setToken() {
					  $.ajax({
						  type: 'get',
						  url: '${ctx}/sendPage/token?token=true',
						  dataType: 'text',
						  success: function (myData) {
							  console.log(myData);
							  $('.formToken').val(myData);
						  }
					  });
				  }


				  /**** Part 四、以下是自定义新增方法  ****/
//1.定义校验规则-定义
				  function setValidate(id) {
					  $(id).each(function () {
						  $(this).bootstrapValidator({
							  feedbackIcons: {
								  valid: 'glyphicon glyphicon-ok',
								  invalid: 'glyphicon glyphicon-remove',
								  validating: 'glyphicon glyphicon-refresh'
							  }, /** 以下需要结合实际业务清空补充个表单元素的验证规则 **/
							  fields: {
								  /** 可自定义新增验证规则
								   "uctUser.userEname":{
		    		 validators: {
		    			 regexp: {
		    				 regexp: /^[0-9]+$/,
		                      message: '只能是数字'
		                  }
		              }
		    	}
								   **/
							  }
						  });
					  });
				  }


			  </script>
		  </section>
		  <!-- Main end -->
	  </div>
	  <!-- foot start -->
	  <%@include file="/common/dxp/foot.jsp" %>
	  <!-- foot start -->
  </div>
  <!-- /.content-wrapper -->
  </body>
  </html>



